<template>
  <div id="api">
    <HeaderNav></HeaderNav>
    <!-- <div data-v-034fc4b9="" data-v-2c2c557c="" class="navbar">
      <img
        data-v-034fc4b9=""
        src="http://likede2-admin.itheima.net/img/logo.3673fab5.png"
        width="88"
        class="logo"
        style="position: relative; top: 4px"
      />
      <div data-v-034fc4b9="" class="right-menu">
        <div data-v-034fc4b9="" class="el-row">
          <div data-v-034fc4b9="" class="el-col el-col-5">
            <div data-v-034fc4b9="" style="height: 60px; line-height: 60px">
              <img
                data-v-034fc4b9=""
                src=""
                style="vertical-align: middle"
              />
            </div>
          </div>
          <div data-v-034fc4b9="" class="el-col el-col-14">
            <div data-v-034fc4b9="" style="height: 60px; line-height: 60px">
              <span data-v-034fc4b9="" style="vertical-align: middle"
                >欢迎您，admin</span
              >
            </div>
          </div>
          <div data-v-034fc4b9="" class="el-col el-col-5">
            <div
              data-v-034fc4b9=""
              class="el-tooltip item"
              aria-describedby="el-tooltip-8480"
              tabindex="0"
              style="height: 60px; line-height: 60px"
            >
              <span
                data-v-034fc4b9=""
                style="vertical-align: middle; cursor: pointer"
                @click="dropout"
                >退出</span
              ><svg
                data-v-034fc4b9=""
                version="1.1"
                viewBox="0 0 1024 1024"
                class="svg-icon svg-fill"
                style="
                  width: 16px;
                  height: 16px;
                  vertical-align: middle;
                  cursor: pointer;
                  color: rgb(255, 255, 255);
                "
              >
                <defs></defs>
                <path
                  pid="0"
                  d="M814.592 348.211L552.858 694.835a51.2 51.2 0 0 1-81.716 0L209.408 348.262a25.6 25.6 0 0 1 20.429-41.062h564.275a25.6 25.6 0 0 1 20.48 41.011z"
                  _fill="#5A5A68"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div> -->
     <div class="datadisplay">
       <SideNav></SideNav>
      <div class="Workordersales">
        <div class="Workordersales-top">
          <div class="Workordersales-left">
            <div class="sell-top">
              <div class="sell-left">
                <div class="top">
                  <h3>工单管理</h3>
                  <span>2022.11.01 ~ 2022.11.21</span>
                </div>
                <div class="bottom">
                  <div class="bottom-num">
                    <span>397</span>
                    <p>工单总数(个)</p>
                  </div>
                  <div class="bottom-num">
                    <span>0</span>
                    <p>完成单数(个)</p>
                  </div>
                  <div class="bottom-num">
                    <span>0</span>
                    <p>进行工单(个)</p>
                  </div>
                  <div class="bottom-num">
                    <span>391</span>
                    <p>取消工单(个)</p>
                  </div>
                </div>
              </div>
              <div class="sell-right">
                <div class="top">
                  <h3>销售管理</h3>
                  <span>2022.11.01 ~ 2022.11.21</span>
                </div>
                <div class="bottom">
                  <div class="bottom-num">
                    <span>9848</span>
                    <p>订单量(个)</p>
                  </div>
                  <div class="bottom-num">
                    <span>6.92</span>
                    <p>销售额(万元)</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="sell-bottom">
              <div ref="box" class="chart-box" style="height: 325px"></div>
              <div class="sellbottom-right">
                <div class="time-top">
                  <span>周</span>
                  <span>月</span>
                  <span>年</span>
                </div>
                <div class="time-pic">
                  <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
          </div>
          <div class="Workordersales-right">
            <div class="title">
              <h3>商品热榜</h3>
              <span>2022.11.01 ~ 2022.11.21</span>
            </div>
            <div class="goods-list">
              <div class="list">
                <span>1</span><span>怡宝</span><span class="one">1047单</span>
              </div>
              <div class="list">
                <span>2</span><span>康师傅冰红茶</span
                ><span class="one1">1038单</span>
              </div>
              <div class="list">
                <span>3</span><span>茉莉花茶</span
                ><span class="one2">1032单</span>
              </div>
              <div class="list">
                <span>4</span><span>100橙汁自然纯</span
                ><span class="one3">990单</span>
              </div>
              <div class="list">
                <span>5</span><span>统一阿萨姆奶茶</span
                ><span class="one4">971单</span>
              </div>
              <div class="list">
                <span>6</span><span>星巴克</span><span class="one5">933单</span>
              </div>
              <div class="list">
                <span>7</span><span>可口可乐</span
                ><span class="one6">924单</span>
              </div>
              <div class="list">
                <span>8</span><span>青梅绿茶</span
                ><span class="one7">859单</span>
              </div>
              <div class="list">
                <span>9</span><span>A酷儿橙汁1.5L</span
                ><span class="one8">570单</span>
              </div>
              <div class="list">
                <span>10</span><span>泡面1</span><span class="one9">517单</span>
              </div>
            </div>
            <div></div>
          </div>
        </div>
        <div class="Workordersales-bottom">
          <div class="pic-left">
             <div ref="box1" class="chart-box1" style="height: 300px"></div>
             <div class="pic-num">
              <div class="num">
                <p>16</p>
                <span>点位数</span>
              </div>
               <div class="num">
                <p>5</p>
                <span>合作商数</span>
              </div>
             </div>
          </div>
          <div class="pic-right">
            <div class="pic-title">
              <h3>异常设备监控</h3>
              <i class="iconfont icon-quanquanb"></i>
            </div>
            <div class="pic-img">
              <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</template>
<script>
import SideNav from '@/components/SideNav.vue'
import HeaderNav from '@/components/HeaderNav.vue'
import * as echarts from 'echarts'
export default {
  components: {
    SideNav,
    HeaderNav
  },
  // methods: {
  //   handleOpen (key, keyPath) {
  //     console.log(key, keyPath)
  //   },
  //   handleClose (key, keyPath) {
  //     console.log(key, keyPath)
  //   },
  //   dropout () {
  //     this.$router.push('/loginlo')
  //   }
  // },
  mounted () {
    const myChart = echarts.init(this.$refs.box)
    myChart.setOption({
      title: {
        text: '销售数据 2022.11.21 ~ 2022.11.21'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }
      ]
    })
    const myChart1 = echarts.init(this.$refs.box1)
    // 绘制图表
    myChart1.setOption({
      title: {
        text: '合作商点位数Top5',
        left: 'top'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          radius: ['20%', '50%'],
          roseType: 'radius',
          type: 'pie',
          data: [
            { value: 72.73, name: '金燕龙合作商' },
            { value: 9.09, name: '天华物业' },
            { value: 9.09, name: '北京合作商' },
            { value: 4.55, name: 'likede' },
            { value: 4.54, name: '佳佳' }
          ],
          emphasis: {
            itemStyle: {
              // shadowBlur: 0,
              // shadowOffsetX: 10,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
      ]
    })
  }
}

</script>
<style lang="scss">
// .navbar[data-v-034fc4b9] {
//   height: 60px;
//   width: 100%;
//   position: fixed;
//   top: 0;
//   right: 0;
//   z-index: 1999;
//   background-image: url();
//   background-size: cover;
//   background-repeat: no-repeat;
// }
// .navbar .logo[data-v-034fc4b9] {
//   margin-top: 6px;
//   margin-left: 15px;
// }
// img {
//   border-style: none;
// }
// .navbar .right-menu[data-v-034fc4b9] {
//   float: right;
//   width: 240px;
//   height: 100%;
//   margin-right: 24px;
//   color: #fff;
// }
// .el-row {
//   position: relative;
//   -webkit-box-sizing: border-box;
//   box-sizing: border-box;
// }
// .el-row:after,
// .el-row:before {
//   display: table;
//   content: "";
// }
// *,
// :after,
// :before {
//   -webkit-box-sizing: border-box;
//   box-sizing: border-box;
// }
// .el-col-5 {
//   width: 20%;
// }
// element.style {
//   width: 16px;
//   height: 16px;
//   vertical-align: middle;
//   cursor: pointer;
//   color: rgb(255, 255, 255);
// }
// .svg-fill {
//   fill: currentColor;
//   stroke: none;
// }
// .text {
//   font-size: 14px;
// }

// .item {
//   margin-bottom: 18px;
// }

// .clearfix:before,
// .clearfix:after {
//   display: table;
//   content: "";
// }
// .clearfix:after {
//   clear: both;
// }

// .box-card {
//   width: 480px;
// }
// .datadisplay {
//   display: flex;
//   width: 100%;
//   // height: 600px;
//   margin-top: 70px;
//   // background-color: aqua;
// }
// .classify {
//   width: 200px;
//   position: fixed;
//   // background-color: skyblue;
// }
.datadisplay {
  display: flex;
  width: 100%;
  // height: 600px;
  margin-top: 70px;
  // background-color: aqua;
}
.Workordersales {
  width: 100%;
  // background-color: pink;
  margin-left: 230px;
}
.Workordersales-top {
  display: flex;
  width: 100%;
  height: 500px;
  // background-color: burlywood;
}
.Workordersales-top .Workordersales-left {
  width: 70%;
  height: 500px;
  // background-color: chocolate;
}
.Workordersales-top .Workordersales-right {
  border-radius: 15px;
  margin-left: 20px;
  width: 30%;
  height: 500px;
  background-color: #fff;
}
.Workordersales-right .goods-list {
  margin-left: 30px;
}
.Workordersales-right .goods-list .list {
  margin-bottom: 27px;
  font-size: 14px;
}
.Workordersales-right .goods-list .one {
  padding-left: 150px;
  color: #ccc;
}
.Workordersales-right .goods-list .one1 {
  padding-left: 92px;
  color: #ccc;
}
.Workordersales-right .goods-list .one2 {
  padding-left: 120px;
  color: #ccc;
}
.Workordersales-right .goods-list .one3 {
  padding-left: 80px;
  color: #ccc;
}
.Workordersales-right .goods-list .one4 {
  padding-left: 75px;
  color: #ccc;
}
.Workordersales-right .goods-list .one5 {
  padding-left: 130px;
  color: #ccc;
}
.Workordersales-right .goods-list .one6 {
  padding-left: 115px;
  color: #ccc;
}
.Workordersales-right .goods-list .one7 {
  padding-left: 112px;
  color: #ccc;
}
.Workordersales-right .goods-list .one8 {
  padding-left: 75px;
  color: #ccc;
}
.Workordersales-right .goods-list .one9 {
  padding-left: 120px;
  color: #ccc;
}
.Workordersales-top .Workordersales-right .title {
  padding-left: 20px;
  padding-top: 6px;
  display: flex;
}
.Workordersales-top .Workordersales-right span {
  padding-top: 17px;
  padding-left: 10px;
}
.Workordersales-top .Workordersales-left .sell-top {
  display: flex;
  width: 100%;
  height: 150px;
  // background-color: pink;
  margin-bottom: 20px;
}
.sell-top .sell-left {
  border-radius: 15px;
  padding-left: 10px;
  padding-right: 20px;
  // display: flex;
  width: 55%;
  height: 150px;
  background-color: #e9f3ff;
}
.sell-top .sell-left .top {
  display: flex;
}
.sell-top .sell-left .bottom {
  width: 100%;
  height: 60px;
  // background-color: skyblue;
  padding-left: 10px;
  display: flex;
  justify-content: space-around;
}
.sell-bottom {
  display: flex;
}
.sell-bottom .chart-box {
  width: 50%;
  height: 100%;
  // background-color: skyblue;
}
.sell-bottom .sellbottom-right {
  width: 50%;
  height: 100%;
  // background-color: pink;
}
.sellbottom-right .time-top {
  margin-top: 10px;
  border-radius: 10px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin-left: 280px;
  background-color: #F7FBFF;
}
.sellbottom-right .time-pic {
  margin-left: 130px;
  margin-top: 60px;
}
.sellbottom-right .time-pic p {
  margin-left: 40px;
}
.sellbottom-right .time-top span {
  margin-left: 16px;
}
.sell-top .sell-left h3 {
  padding-right: 12px;
}
.sell-top .sell-left span {
  color: #ccc;
  padding-top: 17px;
}
.sell-top .sell-left .bottom .bottom-num {
  width: 80px;
  height: 100%;
  // background-color: pink;
}
.sell-top .sell-left .bottom .bottom-num span {
  color: #072074;
  font-weight: 700;
  font-size: 22px;
}
.sell-top .sell-left .bottom .bottom-num p {
  width: 80px;
  font-size: 10px;
  color: #97acde;
}
.sell-top .sell-right {
  border-radius: 15px;
  margin-left: 20px;
  width: 45%;
  height: 150px;
  background-color: #fbefe8;
}
.sell-top .sell-right .top {
  display: flex;
}
.sell-top .sell-right h3 {
  padding-left: 10px;
  padding-right: 12px;
}
.sell-top .sell-right span {
  color: #ccc;
  padding-top: 17px;
}
.sell-top .sell-right .bottom .bottom-num span {
  color: #ff5757;
  font-weight: 700;
  font-size: 22px;
}
.sell-top .sell-right .bottom .bottom-num p {
  width: 80px;
  font-size: 10px;
  color: #efcac4;
}
.sell-top .sell-right .bottom {
  width: 100%;
  height: 60px;
  // background-color: skyblue;
  padding-left: 10px;
  display: flex;
  justify-content: space-around;
}
.Workordersales-top .Workordersales-left .sell-bottom {
  border-radius: 15px;
  width: 100%;
  height: 325px;
  background-color: #fff;
}
.Workordersales-bottom {
  display: flex;
  margin-top: 20px;
  width: 100%;
  height: 300px;
  // background-color: burlywood;
}
.Workordersales-bottom .pic-left {
  display: flex;
  border-radius: 15px;
  width: 60%;
  height: 300px;
  background-color: #fff;
}
.pic-left .chart-box1 {
  width: 60%;
  height: 100%;
  padding-left: 20px;
  // background-color: #5373E0;
}
.pic-left .pic-num {
  border-radius: 10px;
  width: 20%;
  height: 70%;
  background-color: #F8F8F9;
  margin-top: 50px;
  margin-left: 30px;
}
.pic-left .pic-num .num {
 width: 60px;
 height: 100px;
 margin-left: 30px;
//  background-color: #5373E0;
}
.pic-left .pic-num .num p {
  font-size: 16px;
  color: #072074;
  font-weight: 700;
}
.Workordersales-bottom .pic-right {
  border-radius: 15px;
  width: 35%;
  height: 300px;
  background-color: #fff;
  margin-left: 20px;
}
 .pic-right .pic-title {
  display: flex;
  margin-left: 20px;
  margin-right: 20px;
  justify-content: space-between;
 }
 .pic-right .pic-title .iconfont {
  margin-top: 15px;
  color: #5373E0;
 }
.pic-right .pic-img {
  margin-left: 150px;
  margin-top: 60px;
}
.pic-right .pic-img p {
  margin-left: 50px;
  margin-top: 10px;
}
</style>
